<template>
  <div>
    课程名称: &nbsp;&nbsp;
    <el-input
      style="width: 200px"
      placeholder="请输入内容"
      v-model="title"
      @keyup.native.enter="search"
    ></el-input
    >&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button type="primary" @click="search">查询</el-button>
    <!-- 分割线 -->
    <el-divider content-position="left">列表数据</el-divider>
    <!-- 表格 -->
    <el-table :data="courseData">
      <el-table-column label="封面" width="120px" align="center">
        <template slot-scope="scope">
          <img
            :src="`http://176.221.16.8:8080${scope.row.vimg}`"
            width="60px"
          />
        </template>
      </el-table-column>
      <el-table-column label="课程名" prop="title"></el-table-column>
      <!-- <el-table-column label="视频简介" prop="vinfo"></el-table-column> -->
      <el-table-column label="课程时长" prop="vtime"></el-table-column>
      <el-table-column label="卡路里" prop="Kcal"></el-table-column>
      <el-table-column label="难度" prop="exp"></el-table-column>
      <el-table-column label="部位" prop="vbody"></el-table-column>
      <el-table-column label="器械" prop="calorie"></el-table-column>
      <el-table-column label="分类" prop="vtype"></el-table-column>
      <el-table-column label="操作" width="220px">
        <template slot-scope="scope">
          <!-- <el-button
            size="small"
            type="info"
            icon="el-icon-view"
            circle
            @click="$router.push('/home/course-video?id='+scope.row.video_id)"
          ></el-button> -->
          <el-button
            size="small"
            type="warning"
            icon="el-icon-edit"
            circle
            @click="
              $router.push('/home/course-update?video_id='+scope.row.video_id)
            "
          ></el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteCourse(scope.row.video_id)"
          ></el-button>
          <!-- <el-button
            size="small"
            type="success"
            icon="el-icon-circle-plus-outline"
            circle
          ></el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      courseData: [],
      title: "",
    };
  },
  mounted() {
    this.listcourse();
  },
  methods: {
    /** 列出课程列表 */
    listcourse() {
      httpApi.courseApi.courseList().then((res) => {
        console.log("加载课程列表", res);
        this.courseData = res.data.data;
      });
    },

    /** 模糊插叙课程列表 */
    search() {
      if (this.title.trim() == "") {
        this.listcourse();
      } else {
        this.listcourseByName();
      }
    },

    /** 通过关键字查询课程 */
    listcourseByName() {
      let params = { title: this.title };
      httpApi.courseApi.querycourseByName(params).then((res) => {
        console.log("6666", res);
        this.courseData = res.data.data;
      });
    },

    /** 删除课程 */
    deleteCourse(video_id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消删除",
        type: "warning",
      })
        .then((res) => {
          httpApi.courseApi.courseDelete({ video_id }).then((res) => {
            this.$message({ type: "success", message: "删除成功" });
            // 重新加载当前数据
            this.search();
          });
        })
        .catch((err) => {
          this.$message({ type: "info", message: "已为你取消删除" });
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
